<template>
    <div class="awardWinningAchievements">
        <header-cont :page="loginstatus == 'unlogin' ? '' : 'login'"></header-cont>
        <div class="section">
            <div class="sec_right">
                <div class="newarea-right-title">
                    <b>{{ $route.meta.title }}</b>
                    <p>
                        <a href="https://www.cec.org.cn/" target="_blank">
                            <a-icon type="home" />
                            <span>首页</span>
                        </a>
                        <i>-</i>
                        <span>{{ $route.meta.title }}</span>
                    </p>
                </div>
                <div class="content">
                    <div class="table-page-search-wrapper">
                        <!-- 搜索区域 -->
                        <div id="components-form-demo-advanced-search">
                            <a-form-model class="ant-advanced-search-form" ref="formInline">
                                <a-row :gutter="24" type="flex">
                                    <a-col :span="8">
                                        <a-form-model-item label="奖项类别">
                                            <a-select showArrow :getPopupContainer="(triggerNode) => {
                                                    return (
                                                        triggerNode.parentNode ||
                                                        document.body
                                                    );
                                                }
                                                " v-model="queryParam.workorderTypes" placeholder="请选择" show-search
                                                :filter-option="filterOption">
                                                <a-select-option value="item">item</a-select-option>
                                                <a-select-option value="item1">item1</a-select-option>
                                                <a-select-option value="item2">item2</a-select-option>
                                            </a-select>
                                        </a-form-model-item>
                                    </a-col>
                                    <a-col :span="8">
                                        <a-form-model-item label="年度">
                                            <a-select showArrow :getPopupContainer="(triggerNode) => {
                                                    return (
                                                        triggerNode.parentNode ||
                                                        document.body
                                                    );
                                                }
                                                " v-model="queryParam.workorderTypes" placeholder="请选择" show-search
                                                :filter-option="filterOption">
                                                <a-select-option value="item">item</a-select-option>
                                                <a-select-option value="item1">item1</a-select-option>
                                                <a-select-option value="item2">item2</a-select-option>
                                            </a-select>
                                        </a-form-model-item>
                                    </a-col>
                                    <a-col :span="8">
                                        <a-form-model-item label="获奖等级">
                                            <a-select showArrow :getPopupContainer="(triggerNode) => {
                                                    return (
                                                        triggerNode.parentNode ||
                                                        document.body
                                                    );
                                                }
                                                " v-model="queryParam.workorderTypes" placeholder="请选择" show-search
                                                :filter-option="filterOption">
                                                <a-select-option value="item">item</a-select-option>
                                                <a-select-option value="item1">item1</a-select-option>
                                                <a-select-option value="item2">item2</a-select-option>
                                            </a-select>
                                        </a-form-model-item>
                                    </a-col>
                                    <a-col :span="8">
                                        <a-form-model-item label="成果编号">
                                            <a-input v-model="queryParam.workorderName" placeholder="请输入成果编号" />
                                        </a-form-model-item>
                                    </a-col>
                                    <a-col :span="8">
                                        <a-form-model-item label="成果名称">
                                            <a-input v-model="queryParam.workorderName" placeholder="请输入成果名称" />
                                        </a-form-model-item>
                                    </a-col>
                                    <a-col :span="8">
                                        <a-form-model-item label="成果类别">
                                            <a-select showArrow :getPopupContainer="(triggerNode) => {
                                                    return (
                                                        triggerNode.parentNode ||
                                                        document.body
                                                    );
                                                }
                                                " v-model="queryParam.workorderTypes" placeholder="请选择" show-search
                                                :filter-option="filterOption">
                                                <a-select-option value="item">item</a-select-option>
                                                <a-select-option value="item1">item1</a-select-option>
                                                <a-select-option value="item2">item2</a-select-option>
                                            </a-select>
                                        </a-form-model-item>
                                    </a-col>
                                    <a-col :span="8">
                                        <a-form-model-item label="完成单位">
                                            <a-input v-model="queryParam.workorderName" placeholder="请输入完成单位" />
                                        </a-form-model-item>
                                    </a-col>
                                    <a-col :span="8">
                                        <a-form-model-item label="主要完成人">
                                            <a-input v-model="queryParam.workorderName" placeholder="请输入主要完成人" />
                                        </a-form-model-item>
                                    </a-col>
                                    <a-col :span="8" style="text-align: right">
                                        <a-form-model-item>
                                            <span class="table-page-search-submitButtons">
                                                <a-button type="primary" @click="searchQuery">查询</a-button>
                                                <a-button :style="{ marginLeft: '8px' }"
                                                    @click="resetParams">重置</a-button>
                                            </span>
                                        </a-form-model-item>
                                    </a-col>
                                </a-row>
                            </a-form-model>
                        </div>
                    </div>
                    <div class="table-page-wrapper">
                        <a-table :columns="columns" :data-source="data"></a-table>
                    </div>
                </div>
            </div>
        </div>
        <footer-cont></footer-cont>
    </div>
</template>

<script>
import headerCont from '@/views/declarationSystem/common/header-login';
import footerCont from '@/views/declarationSystem/common/footer';
const columns = [
    {
        title: '序号',
        type: 'index',
        width: 65,
        customRender:function (t,r,index) {
            return parseInt(index)+1;
        }
    },
    {
        title: '获奖类别',
        dataIndex: 'name',
        key: 'name',
        width: 110
    },
    {
        title: '获奖等级',
        dataIndex: 'age',
        key: 'age',
        width: 110
    },
    {
        title: '成果编号',
        dataIndex: 'address',
        key: 'address 1',
        width: 110
    },
    {
        title: '成果类别',
        dataIndex: 'address',
        key: 'address 2',
        width: 110
    },
    {
        title: '成果名称',
        dataIndex: 'address',
        key: 'address 3',
        width: 110
    },
    {
        title: '完成单位（专利权人）',
        dataIndex: 'address',
        key: 'address 4',
        width: 160
    },
    {
        title: '主要完成人（发明人）',
        dataIndex: 'address',
        key: 'address 4',
        width: 160
    },
];

const data = [
    {
        key: '1',
        name: 'John Brown',
        age: 32,
        address: 'New York',
        tags: ['nice', 'developer'],
    },
    {
        key: '2',
        name: 'Jim Green',
        age: 42,
        address: 'New York',
        tags: ['loser'],
    },
    {
        key: '3',
        name: 'Joe Black',
        age: 32,
        address: 'New York',
        tags: ['cool', 'teacher'],
    },
];
export default {
    data() {
        return {
            queryParam: {},
            loginstatus: '',
            data,
            columns,
        }
    },
    components: {
        headerCont,
        footerCont
    },
    mounted() {
        this.getLoginStatus();
    },
    methods: {
        getLoginStatus() {
            var islogin = sessionStorage.getItem('islogin');
            if (islogin == '1') {
                this.loginstatus = 'login';
            } else {
                this.loginstatus = 'unlogin';
            };
        },
        searchQuery() {
            this.$message.error("接口待联调")
        },
        resetParams() {
            this.queryParam = {};
        },
        filterOption(input, option) {
            return (
                option.componentOptions.children[0].text
                    .toLowerCase()
                    .indexOf(input.toLowerCase()) >= 0
            );
        },
    },
}
</script>
<style lang="less" scoped>
.awardWinningAchievements {
    width: 100%;
    background: #F7F7F7;

    /deep/.ant-advanced-search-form .ant-form-item {
        display: flex;
        margin-bottom: 10px;

        .ant-form-item-label {
            width: 110px;
        }

        .ant-form-item-control-wrapper {
            flex: 1;
        }
    }
}

.section {
    position: relative;
    width: 1200px;
    height: 690px;
    margin: 2px auto 0;
    display: flex;
    background: #fff;
    margin-top: 30px;

    .sec_right {
        position: relative;
        flex: 1;
        height: 100%;
        background: #FFFFFF;
        overflow: hidden;
        overflow-y: scroll;
    }
}


.sec_right {
    padding: 0 18px 30px 33px;

    .newarea-right-title {
        width: 100%;
        height: 50px;
        line-height: 50px;
        letter-spacing: 1px;
        border-bottom: 2px solid #2d8cf0;
        margin: 20px 0;
        display: flex;
        justify-content: space-between;

        b {
            font-weight: normal;
            font-size: 21px;
            font-weight: bold;
            color: #333;
        }

        p {
            height: 50px;
            display: flex;
            align-items: center;

            a {
                &:hover {
                    span {
                        color: #2d8cf0;
                        font-size: 14px;
                    }

                    i {
                        color: #2d8cf0;
                    }
                }

                span {
                    color: #999;
                    font-size: 14px;
                    margin-right: 5px;
                }

                i {
                    color: #999;
                }
            }

            &>i {
                font-style: normal;
                margin: 0 10px;
                color: #999;
            }

            &>span {
                color: #666;
                font-size: 14px;
            }
        }
    }
}
</style>
